<template>
    <MainDetails />
        <BgLine />
        <BackGround>
            <div class='_main'>
                <div class="_main_name">-- 申请工会 --</div>
                <div class="_main_m">
                    <div class="_main_t1" @click="s.showMenu=true">
                        <div>请选择工会等级</div>
                      <div>Lv{{s.level}}</div>
                    </div>
                    <div class="_main_t2">
                        <div>工会名称</div>
                      <input type="text" v-model="s.name" placeholder="请设置名称" maxlength="12" minlength="2">
                    </div>
                    <div class="_main_t3">
                        <div>消耗KOS数量</div>
                      <div>{{ s.cost }} KOS</div>
                    </div>
                    <div class="_main_t3">
                        <div>质押卡牌</div>
                      <div>5张{{ $t('color' + s.color) }}卡</div>
                    </div>
                    <div class="_main_t4">
                      <ActiveCard :cardObj="s.items[0]" @click="selectCard(0)"/>
                      <ActiveCard :cardObj="s.items[1]" @click="selectCard(1)"/>
                      <ActiveCard :cardObj="s.items[2]" @click="selectCard(2)"/>
                      <ActiveCard :cardObj="s.items[3]" @click="selectCard(3)"/>
                      <ActiveCard :cardObj="s.items[4]" @click="selectCard(4)"/>
                    </div>
                    <button class="union_join" @click="apply">申请工会</button>
                </div>
            </div>
        </BackGround>

  <van-popup
      v-if="s.showMenu2"
      v-model:show="s.showMenu2"
      closeable
      position="bottom"
  >
    <SelectCard2 :onSelectCard="onSelectCard" :color="s.color" :data="s.data"/>

  </van-popup>

  <van-action-sheet
      v-model:show="s.showMenu"
      :actions="actions"
      cancel-text="取消"
      @select="onSelect"
      close-on-click-action
  />


</template>
<script setup>
    import MainDetails from '@components/MainDetails/index.vue'
    import BgLine from '@components/BgLine/index.vue'
    import BackGround from "@components/BackGroundBox/index.vue";
    import ActiveCard from "@components/ActiveCard/index.vue";
    import SelectCard2 from "@views/SelectCard2/index.vue";
    import http from "../../http";
    import {ref, computed, reactive} from 'vue'
    import {useI18n} from 'vue-i18n'
    import {useRouter} from 'vue-router'

    const {t} = useI18n()
    const router = useRouter()

    const s = ref({
      showMenu: false,
      showMenu2: false,
      name: '',
      level: 1,
      ids: [0,0,0,0,0],
      selectedIndex: 0,
      items: [
        null,
        null,
        null,
        null,
        null,
      ],
      color: 0,
      cost: 0,
      levels: [],
      data: [],
    })

    const actions = computed(() => {
      return s.value.levels.map(row => {
        return {
          name: `LV${row[0]}`,
          data: row,
        }
      })
    })

    function selectCard(i) {
      s.value.selectedIndex = i
      s.value.showMenu2 = true
    }

    function onSelectCard(card) {
      console.log('onSelectCard=', card);
      s.value.showMenu2=false
      s.value.items[s.value.selectedIndex] = card
    }

    function onSelect(e) {
      s.value.level = e.data[0]
      s.value.color = e.data[1]
      s.value.cost = e.data[2]
    }

    async function init() {
      var res = await http.get('/api/union/applyInfo')
      if (res.code === 200) {
        if (res.data.unionStatus === 2) {
          router.replace('/MyUnion')
          return
        }
        var data = res.data.data
        s.value.levels = data
        if (data.length > 0) {
          s.value.level = data[0][0]
          s.value.color = data[0][1]
          s.value.cost = data[0][2]
        }
      }
    }

    init()

    async function apply() {
      var ids = s.value.items.map(row => {
        if (!row) {
          throw Error('ids require');
        }
        return row.id
      }).join(',')
      var name = s.value.name
      var level = s.value.level;
      var res = await http.post(`/api/union/apply?name=${name}&level=${level}&ids=${ids}`)
      if (res.code === 200) {
        Toast(t('operationSuccess'))
        router.replace('/MyUnion')
      }
    }

</script>
<style lang="scss" scoped>
._main_name {
  font-size: 18px;
  @include fontTCMedium;
  font-weight: 500;
  color: $color3;
  line-height: 25px;
}
._main {
  padding: 18px 15px;
  position: relative;
}
._main_m {
  width: 345px;
  height: 405px;
  background: #100d0d;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 63px;
  transform: translateX(-50%);
  padding: 19px 14px 0 14px;
}
._main_t1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
    &:nth-child(2) {
      width: 92px;
      height: 32px;
      font-size: 13px;
      font-family: PingFangTC-Regular, PingFangTC;
      font-weight: 400;
      color: #dea05c;
      line-height: 32px;
      padding-left: 14px;
      background: url("@/assets/UpgradeUnion/icon_selectx.png") no-repeat center;
      background-size: cover;
      text-align: left;
    }
  }
}
._main_t2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
  }
  > input {
    width: 133px;
    height: 33px;
    padding-left: 10px;
    background: transparent;
    border: 1px solid #868686;
    border-radius: 3px;
    outline: none;
    font-size: 12px;
  }
}
._main_t3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25px;
  > div {
    font-size: 14px;
    color: #868686;
    font-family: PingFangTC-Medium, PingFangTC;
    &:nth-child(2) {
      color: #d8bc84;
      font-weight: 500;
      font-family: PingFangTC-Medium, PingFangTC;
    }
  }
}
._main_t4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
  > div {
    &:last-child {
      margin-right: 0;
    }
  }
}
.union_join {
  width: 100%;
  height: 44px;
  background: #d8bc84;
  border-radius: 5px;
  font-size: 17px;
  @include fontSCRegular;
  font-weight: 400;
  color: #fff;
  line-height: 44px;
  margin-top: 40px;
}
</style>
